<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>alovez</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/snap.svg-min.js"></script>
    <script type="text/javascript">
    var point = new Array("250 20", "173.233 152.964", "116.396 250", "19.06 420", "316.534 135.241", "326.767 152.964", "245 250", "270 250", "364.286 250", "123 269", "222 335", "413 335", "173.233 420", "480.94 420");
    var PathA = new Array();
    duration = 500;
    $(document).ready(function() {
        var svg = Snap("svg.maskUp");
        PathA[0] = svg.paper.path(p2p(3)).attr({
            stroke: "#000",
            strokeWidth: 20,
            fill: "#FFF",
            fillOpacity: 0
        });
        PathA[1] = svg.paper.path(p2p(2)).attr({
            stroke: "#000",
            strokeWidth: 20,
            fill: "#FFF",
            fillOpacity: 0
        });
        PathA[2] = svg.paper.path(p2p(0)).attr({
            stroke: "#000",
            strokeWidth: 20,
            fill: "#FFF",
            fillOpacity: 0
        });
        PathA[3] = svg.paper.path(p2p(1)).attr({
            stroke: "#000",
            strokeWidth: 20,
            fill: "#FFF",
            fillOpacity: 0
        });
        PathA[4] = svg.paper.path(p2p(10)).attr({
            stroke: "#000",
            strokeWidth: 20,
            fill: "#FFF",
            fillOpacity: 0
        });
        PathA[5] = svg.paper.path(p2p(10)).attr({
            stroke: "#000",
            strokeWidth: 20,
            fill: "#FFF",
            fillOpacity: 0
        });
        PathA[6] = svg.paper.path(p2p(9)).attr({
            stroke: "#000",
            strokeWidth: 20,
            fill: "#FFF",
            fillOpacity: 0
        });
        PathA[7] = svg.paper.path(p2p(1)).attr({
            stroke: "#000",
            strokeWidth: 20,
            fill: "#FFF",
            fillOpacity: 0
        });
        animateA1();
    });
    //point to path
    function p2p() {
        if (arguments.length == 0) {
            return null;
        };
        index0 = arguments[0];
        rPath = "M" + point[index0];
        for (var i = 0; i < arguments.length; i++) {
            indexi = arguments[i];
            rPath = rPath + "L" + point[indexi];
        };
        return rPath;
    }

    function animateA1() {
        PathA[0].animate({
            path: p2p(3, 0)
        }, duration, animateA2);
    }

    function animateA2() {
        PathA[0].animate({
            path: p2p(3, 0, 13)
        }, duration, animateA3);
    }

    function animateA3() {
        PathA[1].animate({
            path: p2p(2, 8)
        }, duration, animateAhide);
    }

    function animateAhide() {
        PathA[0].animate({
            stroke: "#808080"
        }, duration);
        PathA[1].animate({
            stroke: "#808080"
        }, duration, animateLOVE1);
    }

    function animateLOVE1() {
        PathA[2].animate({
            path: p2p(0, 2)
        }, duration, animateLOVE2);
    }

    function animateLOVE2() {
        PathA[2].animate({
            path: p2p(0, 2, 6)
        }, duration, animateLOVE3);
    }

    function animateLOVE3() {
        PathA[3].animate({
            path: p2p(1, 5)
        }, duration, animateLOVE4);
    }

    function animateLOVE4() {
        PathA[3].animate({
            path: p2p(1, 5, 12)
        }, duration, animateLOVE5);
    }

    function animateLOVE5() {
        PathA[4].animate({
        	path: p2p(10,7)
        }, duration)
        PathA[6].animate({
        	path: p2p(9,12)
        }, duration, animateLOVE6)
    }

    function animateLOVE6(){
    	PathA[4].animate({
        	path: p2p(10,7,8)
        }, duration)
        PathA[5].animate({
        	path: p2p(10,11)
        }, duration)
    	PathA[6].animate({
        	path: p2p(9, 12, 13)
        }, duration, animateLOVEhide)
    }

    function animateLOVEhide(){
    	PathA[2].animate({
            stroke: "#808080"
        }, duration);
        PathA[3].animate({
            stroke: "#808080"
        }, duration);
        PathA[4].animate({
            stroke: "#808080"
        }, duration);
        PathA[5].animate({
            stroke: "#808080"
        }, duration);
        PathA[6].animate({
            stroke: "#808080"
        }, duration, animateZ1);
    }

    function animateZ1(){
    	PathA[7].animate({
        	path: p2p(1, 5)
        }, duration, animateZ2)
    }

    function animateZ2(){
    	PathA[7].animate({
        	path: p2p(1,5,12)
        }, duration, animateZ3)
    }

    function animateZ3(){
    	PathA[7].animate({
        	path: p2p(1,5,12,13)
        }, duration)
    }

    function animateZhide() {
    	PathA[7].animate({
            stroke: "#808080"
        }, duration);
    }

    </script>
</head>

<body>
    <svg class="maskUp" width="500px" height="500px" viewbox="0 0 500 500"></svg>
</body>

</html>
